<template>
	<view class="box">
		<view class="text-text">{{ligthdata.name}}</view>
		<view class="time-icon">
			<view class="time">
				{{ligthdata.createTime}}
			</view>
			<view class="icon">
				<uni-icons type="eye-filled" size="15" color="#B1B2B2"></uni-icons>
				{{ligthdata.viewCount}}
			</view>
		</view>
		<view class="video" v-if="ligthdata.video">
			<video :src="ligthdata.video" controls></video>
		</view>
		<view class="richText">
			<rich-text :nodes="ligthdata.details"></rich-text>
		</view>
		<view class="text-more">更多内容</view>
		<view class="corten">
			<view class="title" v-for="(item,index) in ligthdata.articleList" :key="index" @click="getdetails(item.id)">
				<view class="text">
					<view class="title-text">
						{{item.name}}
					</view>
					<view class="text-ellipsis">
						<rich-text :nodes="item.details"></rich-text>
					</view>
					<view class="time">
						{{item.createTime}}
					</view>
				</view>
				<view class="image">
					<image v-if="item.video" :src="item.video" mode=""></image>
					<image v-else :src="item.logo" mode=""></image>
					<image v-if="item.video" class="bofang" src="../../pages/static/bofang.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				ligthdata: {}
			};
		},
		onLoad(ope) {
			if (ope) {
				this.id = ope.id
			}
			this.getligthList()
		},
		methods: {
			//详情
			getdetails(id) {
				uni.navigateTo({
					url: "/subpackageA/pages/home/details?id=" + id
				})
			},
			//文章详情
			getligthList() {
				let data = {
					id: this.id,
				}
				this.$request.get("/water-platform-app-api/home/article/detail", data).then(res => {
					console.log(res, '文章详情');
					this.ligthdata = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		padding: 0rpx 30rpx;
		box-sizing: border-box;
	}

	.text-text {
		padding: 32rpx 0rpx;
		line-height: 50rpx;
		box-sizing: border-box;
		font-weight: 600;
		font-size: 36rpx;
		color: #14171A;
	}

	.time-icon {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.time {
			font-size: 24rpx;
			color: #B1B2B2;
		}

		.icon {
			display: flex;
			align-items: center;
			color: #B1B2B2;
			font-size: 24rpx;
			color: #B1B2B2;
		}
	}

	.video {
		width: 100%;
		margin-top: 10rpx;

		video {
			width: 100%;
		}
	}

	.richText {
		// height: 300rpx;
		// background-color: red;
		margin-top: 64rpx;
		margin-bottom: 96rpx;
	}

	.text-more {
		font-weight: 600;
		font-size: 36rpx;
		color: #14171A;
	}

	.corten {

		.title {
			margin-top: 32rpx;
			height: 214rpx;
			display: flex;
			border-bottom: 1rpx solid #E4E5E6;

			.text {
				flex: 1;
				margin-right: 16rpx;

				.title-text {
					font-size: 28rpx;
					color: #2E3033;
				}

				.text-ellipsis {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #616366;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.time {
					font-size: 24rpx;
					color: #B1B2B2;
					margin-top: 24rpx;
				}
			}

			.image {
				width: 240rpx;
				height: 180rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.bofang {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					position: absolute;
					top: 62rpx;
					left: 92rpx;
				}
			}
		}

		.title:last-child {
			border-bottom: none;
		}
	}
</style>